import { lazy, Suspense } from 'react' // 导入路由懒加载组件
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { HistoryRouter, history } from './utils/history'
import Layout from './pages/Layout'
import CityList from './pages/CityList'
import Home from './pages/Home'
import News from './pages/News'
import HouseList from './pages/HouseList'
import Profile from './pages/Profile'
import Map from './pages/Map'
import Search from './pages/Search'
import Detail from './pages/Details'
import Login from './pages/Login'
import AuthComponent from './components/AuthComponent'
import Reg from './pages/Reg'
// import Favorites from './pages/Favorites'
// 路由懒加载
const Favorites = lazy(() => import('./pages/Favorites'))
const UpdateUser = lazy(() => import('./pages/UpdateUser'))

function App() {
  return (
    // 使用HistoryRouter，配置 history参数，实现非路由组件拿到路由信息
    <HistoryRouter history={history}>
      <div className="App">
        {/* 路由懒加载 使用Suspense将Routes包裹  */}
        <Suspense
          fallback={
            <div style={{ textAlign: 'center', marginTop: 200, color: 'red' }}>
              loading...
            </div>
          }
        >
          <Routes>
            <Route path="/" element={<Layout />}>
              {/* 二级路由 */}
              {/* 默认二级路由 添加index属性 把他自己的path干掉 */}
              <Route index element={<Home />}></Route>
              <Route path="/news" element={<News />}></Route>
              <Route path="/houseList" element={<HouseList />}></Route>
              {/* 这里个人中心需要鉴权 */}
              <Route
                path="/profile"
                element={
                  <AuthComponent>
                    <Profile />
                  </AuthComponent>
                }
              ></Route>
            </Route>
            <Route path="/cityList" element={<CityList />}></Route>
            <Route path="/map" element={<Map />}></Route>
            <Route path="/search" element={<Search />}></Route>
            <Route path="/detail" element={<Detail />}></Route>
            <Route path="/login" element={<Login />}></Route>
            <Route path="/reg" element={<Reg />}></Route>
            <Route path="/favorites" element={<Favorites />}></Route>
            <Route path="/updateUser" element={<UpdateUser />}></Route>
          </Routes>
        </Suspense>
      </div>
    </HistoryRouter>
  )
}

export default App
